const {createApp} = Vue;
	const app = createApp({
		data(){
			return{
				goods,
				// 配送费
				deliveryPrice:5,
				// 起送门槛
				deliveryThreshold:30,
				// 添加按钮动画信息
				addIconInfo:{
					point:{
						x:0,
						y:0
					},
					show:false
				}
			}
		},
		methods:{
			increse(item,e){
				this.addIconInfo.show = false
				setTimeout(()=>{
					// 设置动画的起始位置
					const startRect = e.target.getBoundingClientRect();
					this.addIconInfo.point.x = startRect.x + startRect.width/2;
					this.addIconInfo.point.y = startRect.y + startRect.height/2;
					this.toJump()
				},1)
				item.chooseNum++;
				item.allPrice = item.price * item.chooseNum;
				
			},
			decrese(item){
				if(item.chooseNum <= 0){
					return
				}
				item.chooseNum--;
				item.allPrice = item.price * item.chooseNum
			},
			toJump(){
				this.addIconInfo.show = true;
				setTimeout(()=>{
					const endRect = this.$refs.footerCar.getBoundingClientRect();
					this.addIconInfo.point.x = endRect.x + endRect.width/2;
					this.addIconInfo.point.y = endRect.y + endRect.height/2;
				},1)
			},
			addIconTransitionEnd(){
				this.addIconInfo.show = false;
				this.$refs.footerCar.classList.add('animate')
			},
			carAnimateEnd(){
				this.$refs.footerCar.classList.remove('animate')
			}
		},
		mounted(){
			this.goods = this.goods.map(val => {
				return {
					...val,
					chooseNum:0,
					allPrice:0
				}
			})
		},
		computed:{
			payInfo(){
				let sumPrice = 0;
				let sumNum = 0;
				this.goods.forEach(val =>{
					sumPrice += val.allPrice;
					sumNum += val.chooseNum;
				})
				return {
					payPrice:sumPrice,
					sumNum,
					thretholdPrice:this.deliveryThreshold - sumPrice
				};
			},
			addIconStyle(){
				return {
					divStyle:{
						transform:`translateX(${this.addIconInfo.point.x}px)`
					},
					iconStyle:{
						transform:`translateY(${this.addIconInfo.point.y}px)`
					}
				}
			}
		}
	});
	const vm = app.mount("#app")